<template>
	<page-box>

		<template #center>
			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
				<el-table-column type="index" label="序号" width="60" />
				<el-table-column prop="logName" label="操作内容" show-overflow-tooltip></el-table-column>
				<el-table-column prop="url" label="接口名称" show-overflow-tooltip></el-table-column>
				
				<el-table-column label="操作" width="100">
					<template #default="scope">
						<el-button  size="small" text type="primary"
							@click="onOpenEditLog('edit', scope.row)">查看</el-button>
	
					</template>
				</el-table-column>
			</el-table>
		</template>
		<template #bottom>
			<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
				:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.pageNum" background
				v-model:page-size="state.tableData.param.pageSize" layout="total, ->,sizes, prev, pager, next, jumper"
				:total="state.tableData.total">
			</el-pagination>
		</template>
		<LogDialog ref="logDialogRef" @refresh="getTableData()" />
	</page-box>


</template>

<script setup lang="ts" name="systemLog">

import { ElMessageBox, ElMessage } from 'element-plus';

// 引入组件
const LogDialog = defineAsyncComponent(() => import('./dialog.vue'));

//接口
import { getLog } from '/@/api/system/log'

// 定义变量内容
const logDialogRef = ref();
const getLogs = getLog()
const state = reactive({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			logName: '',
			pageNum: 1,
			pageSize: 10,
		},
	},
});
// 初始化表格数据
const getTableData = () => {
	state.tableData.loading = true;
	getLogs.getLogData({}).then((res: any) => {

		state.tableData.data = res.data;
		state.tableData.total = state.tableData.data.length;
		setTimeout(() => {
			state.tableData.loading = false;
		}, 500);
	})



};
// 打开新增角色弹窗
const onOpenAddLog = (type: string) => {
	logDialogRef.value.openDialog(type);
};
// 打开修改角色弹窗
const onOpenEditLog = (type: string, row: Object) => {
	logDialogRef.value.openDialog(type, row);
};

// 分页改变
const onHandleSizeChange = (val: number) => {
	state.tableData.param.pageSize = val;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.pageNum = val;
	getTableData();
};
// 页面加载时
onMounted(() => {
	getTableData();
});
</script>

<style scoped lang="scss">
::v-deep .pageTop{
	height: 0;
	margin-bottom: 0;
}
.system-log-container {
	.system-log-padding {
		padding: 15px;

		.el-table {
			flex: 1;
		}
	}
}
</style>
